<template>
  <div class="job-hunt">
    <div class="job-main">
      <!--显示子路由内容部分-->
      <router-view></router-view>
      <div class="job-type">
        <ul>
          <li>
            <router-link to="/JobWant" replace>
              <div>
                <span>求职专区</span>
              </div>
            </router-link>
          </li>
          <li>
            <router-link to="/Recruit" replace>
              <div>
                <span>招聘专区</span>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import Footer from '../footer/Footer.vue'

  export default {
    name: 'JobHunt',
    data () {
      return {}
    },
    components: {
      'v-footer': Footer
    }
  }
</script>

<style lang="scss" scoped>
  .job-hunt {
    padding-top: 50px;
    padding-bottom: 60px;
    .job-main {
      .job-type {
        background: #ffff;
        width: 100%;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        position: fixed;
        bottom: 55px;
        z-index: 222;
        ul {
          li {
            width: 48.5%;
            float: left;
            height: 50px;
            text-align: center;
            border-right: 1px solid #d7d7d7;
            a {
              width: 100%;
              color: #000000;
              font-size: 15px;
              font-weight: bolder;
              text-align: center;
              text-decoration: none;
              div {
                height: 48px;
                span {
                  line-height: 50px;
                }
              }
            }
            a.active {
              color: #0078de;
              font-size: 15px;
              font-weight: bolder;
              text-align: center;
              div {
                border-bottom: 3px solid #0078de;
                display: -webkit-inline-box;
              }
            }
          }
          li:last-child {
            border-right: none;
          }
        }
      }
    }

  }
</style>
